import React, {Component} from 'react'
import {fetchData} from '../../../components/AjaxConsumer'
import {
    Form,
    Input,
    Tooltip,
    Icon,
    Cascader,
    Select,
    Row,
    Col,
    Checkbox,
    Button,
    message,
    Modal,
    Radio,
    InputNumber
} from 'antd';
import { SelectUrl } from '../../../components';
const FormItem = Form.Item;

class WorkAreaForm extends React.Component {
    state = {
        modelType: '1',
        loading: false,
        isEdit: false,
        submitUrl: '',
        whCodeUrl: '/base/data/warehouse/r/' + this.props.factoryCode + '/warehouse',
        regionCodeUrl: '',
        modelTypeUrl:'/base/dic/get/model_type',
        typeUrl:'/base/dic/get/type',
        unitLengthUrl:'/base/dic/get/unit_length',
        formData: {}
    };

    onWhCodeChange = (whCode) => {
        if (whCode != '' && whCode != undefined) {
            this.setState({
                regionCodeUrl: '/base/region/r/' + whCode + '/region',
            });
        }
    }
    handleSubmit = (e) => {
        e.preventDefault();
        console.log('44444444444-----------');
        this.props.form.validateFieldsAndScroll((err, fieldsValue) => {
            if (!err) {
                this.setState({loading: true});
                let values = {
                    ...fieldsValue,
                };
                console.log('表单提交数据-----------', values);
                //发送ajax 控制请求数据规则，无值的设为空
                for (let item in values) {
                    if (!values[item]) {
                        values[item] = ''
                    }
                }
                const options = {
                    url: this.state.submitUrl,
                    type: 'post',
                    condition: values
                };

                fetchData(
                    this,
                    options,
                    (res) => {
                        //成功回调函数
                        this.setState({
                            loading: false
                        });
                        if (res.code == '1') {
                            message.success('操作成功');

                            this.handleCancel();
                            this.props.refreshHandle();
                        } else {
                            //message.error(res.msg);
                        }

                    },
                    (res) => {
                        this.setState({
                            loading: false
                        });
                    }
                )
            }
        });
    }

    handleCancel = () => {
        this.props.onCancel();//123
        this.props.form.resetFields(); //初始化表单
        //初始化ajax加载过来的selectList
    }

    modelTypeChange = (value) => {
        console.log('values-----------'+value);
        this.setState({
            modelType: value,
        });
        // this.props.form.resetFields();
        // this.props.form.resetFields(['modelType']);
        this.props.form.resetFields(['model']);
        this.props.form.resetFields(['modelDescZh']);
        this.props.form.resetFields(['unit']);
        this.props.form.resetFields(['outsideDiameter']);
        this.props.form.resetFields(['thickness']);
    }

    huozhuChange = (value) => {
        // this.props.form.resetFields();
        // this.props.form.resetFields(['modelType']);
        this.props.form.resetFields(['model']);
        this.props.form.resetFields(['modelDescZh']);
        this.props.form.resetFields(['unit']);
        this.props.form.resetFields(['outsideDiameter']);
        this.props.form.resetFields(['thickness']);
    }

    outsideDiameterCheck = (rule, value, callback) => {
        //const modelType = this.state.modelType;
        //const form = this.props.form;
        //console.log('outsideDiameterCheck-----------'+ this.props.form.getFieldValue('modelType'));
        const modelType = this.props.form.getFieldValue('modelType');
        if(modelType == 'LW' || modelType == 'WF' || modelType == 'PE'){
            if (value && value>0) {
                if(value > 2000){
                    callback('外径不能超过2000毫米');
                }else{
                    callback();
                }
            } else {
                callback('请输入外径');
            }
        }else{
            callback();
        }
    }

    thicknessCheck = (rule, value, callback) => {
        //const modelType = this.state.modelType;
        //console.log('thicknessCheck-----------'+modelType);
        const modelType = this.props.form.getFieldValue('modelType');
        // 0本公司、1外公司
        const huozhu = this.props.form.getFieldValue('userDefined3');
        console.log('huozhu-----------'+huozhu);
        if(huozhu && huozhu == '0'){
            if(modelType == 'LW' || modelType == 'WF' || modelType == 'PE'){
                if (value && value>0) {
                    if(value > 50){
                        callback('壁厚不能超过50毫米');
                    }else{
                        callback();
                    }
                } else {
                    callback('请输入壁厚');
                }
            }else{
                callback();
            }
        }else{
            if (value && value>0) {
                if(value > 50){
                    callback('壁厚不能超过50毫米');
                }else{
                    callback();
                }
            }else{
                callback();
            }
        }
    }

    //propertity 修改时执行
    componentWillReceiveProps(newProps){
        this.setState({
            isEdit: newProps.isEdit,
            submitUrl: newProps.submitUrl,
            formData: newProps.formData
        });
    }

    // 组件参数实例化-仅一次
    componentWillMount(){
        this.setState({
            isEdit: this.props.isEdit,
            submitUrl: this.props.submitUrl,
            formData: this.props.formData
        });
    }

    render() {
        const {getFieldDecorator} = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 6}
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 18}
            }
        };
        const tailFormItemLayout = {
            wrapperCol: {
                xs: {span: 24, offset: 0},
                sm: {span: 24, offset: 10}
            }
        };

        let objectInfo = this.state.formData;

        return (
            <div>
                <Form
                    onSubmit={this.handleSubmit}
                    style={{
                                backgroundColor: '#fff',
                                paddingTop: '20px',
                                paddingBottom: '20px'
                            }}>
                    <Row>
                        <Col span={0}>
                            <FormItem>
                                {getFieldDecorator('modelId', {
                                    initialValue: objectInfo.modelId ? objectInfo.modelId.toString() : "",
                                    rules: [
                                        {}
                                    ]
                                })(<Input type="hidden"/>)}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="型号类型">
                                {getFieldDecorator('modelType', {
                                    initialValue: objectInfo.modelType ? objectInfo.modelType : "",
                                    rules: [
                                        {
                                            required: true, whitespace: true, message: '请输入型号类型'
                                        }
                                    ]
                                })(
                                    <SelectUrl url={this.state.modelTypeUrl} onChange={this.modelTypeChange} type="get" dicCode="dicCode" dicName="dicName"/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="型号代码">
                                {getFieldDecorator('model', {
                                    initialValue: objectInfo.model ? objectInfo.model : "",
                                    rules: [
                                      {
                                          required: true,whitespace: true,message: '请输入型号代码'
                                        }
                                    ]
                                })(
                                    <Input placeholder="请输入" disabled={this.state.isEdit}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="型号描述">
                                {getFieldDecorator('modelDescZh', {
                                    initialValue: objectInfo.modelDescZh ? objectInfo.modelDescZh : "",
                                    rules: [
                                        {
                                            required: true, whitespace: true, message: '请输入型号描述'
                                        },{
                                            max:100,message: '输入内容应少于100个字符'
                                        }
                                    ]
                                })(
                                    <Input placeholder="请输入"/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="计量单位">
                                {getFieldDecorator('unit', {
                                    initialValue: objectInfo.unit ? objectInfo.unit : "",
                                    rules: [
                                        {
                                            required: true, whitespace: true, message: '请输入计量单位'
                                        }
                                    ]
                                })(
                                    <SelectUrl url={this.state.unitLengthUrl} type="get" dicCode="dicCode" dicName="dicName"/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="外径(毫米)">
                                {getFieldDecorator('outsideDiameter', {
                                    initialValue: objectInfo.outsideDiameter ? objectInfo.outsideDiameter : null,
                                    rules: [
                                        {
                                            validator: this.outsideDiameterCheck.bind(this),
                                        }
                                    ]
                                })(
                                    <InputNumber min={0} max={9999} step={1}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="壁厚（毫米）">
                                {getFieldDecorator('thickness', {
                                    initialValue: objectInfo.thickness ? objectInfo.thickness : null,
                                    rules: [
                                        {
                                            validator: this.thicknessCheck.bind(this),
                                        }
                                    ]
                                })(
                                    <InputNumber min={0} max={9999} step={1}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="货主">
                                {getFieldDecorator('userDefined3', {
                                    initialValue: objectInfo.userDefined3 ? objectInfo.userDefined3 : "0",
                                    rules: [
                                        {
                                            //required: true,whitespace: true,message: '请输入型号代码'
                                        }
                                    ]
                                })(
                                    <Select defaultValue="0" onChange={this.huozhuChange} >
                                        <Option value="0">本公司</Option>
                                        <Option value="1">外公司</Option>
                                    </Select>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="来料公司">
                                {getFieldDecorator('remark', {
                                    initialValue: objectInfo.remark ? objectInfo.remark : "",
                                    rules: [
                                        // {
                                        //     required: true, whitespace: true, message: '请输入型号描述'
                                        // },{
                                        //     max:100,message: '输入内容应少于100个字符'
                                        // }
                                    ]
                                })(
                                    <Input placeholder="请输入"/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={24} style={{ textAlign: 'center',marginTop:'10px' }}>
                                <Button type="primary" htmlType="submit" size="large">
                                    {this.state.loading ? '提交中...' : '确定'}
                                </Button>
                                <Button type="default" style={{marginLeft: '50px'}} size="large" onClick={this.handleCancel}>
                                    取消
                                </Button>
                        </Col>
                    </Row>
                </Form>
            </div>
        );
    }
}

export default Form.create()(WorkAreaForm);
